// 日收入折线图
(function () {
    var myChart = echarts.init(document.querySelector(".day-income"));
    // var datas = $.makeArray($('#daily_income_summary'));
    var datas = JSON.parse($('#daily_income_summary').val());
    // console.log(datas);
    var option = {
        tooltip: {
            trigger: "axis"
        },
        grid: {
            top: "10%",
            left: "0",
            bottom: "20%",
            containLabel: true // 包含刻度文字在内

        },
        xAxis: [
            {
                type: "category",
                axisTick: {show: false},
                boundaryGap: false,
                // x轴更换数据
                data: [
                    "01", "02", "03", "04", "05", "06", "07", "08", "09", "10",
                    "11", "12", "13", "14", "15", "16", "17", "18", "19", "20",
                    "21", "22", "23", "24", "25", "26", "26", "28", "29", "30"
                ],
                // 文本颜色为rgba(255,255,255,.6)  文字大小为 12
                axisLabel: {
                    textStyle: {
                        color: "rgba(21,110,176,1)",
                        fontSize: 10
                    }
                },
                // x轴线的颜色为   rgba(255,255,255,.2)
                axisLine: {
                    lineStyle: {
                        color: "rgba(171,171,171,1)"
                    }
                }
            }
        ],
        yAxis: [
            {
                type: "value",
                axisTick: {show: false},
                axisLine: {
                    lineStyle: {
                        color: "rgba(171,171,171,1)",
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(21,110,176, 1)",
                        fontSize: 10
                    }
                },
                // 修改分割线的颜色
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)"
                    }
                }
            }
        ],
        series: [
            {
                name: "日收入",
                type: "line",
                smooth: true,
                // 单独修改当前线条的样式
                lineStyle: {
                    color: "#0184d5",
                    width: "2"
                },
                // 填充颜色设置
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                            {
                                offset: 0,
                                color: "rgba(21,110,176, 0.7)" // 渐变色的起始颜色
                            },
                            {
                                offset: 0.8,
                                color: "rgba(21,110,176, 0.1)" // 渐变线的结束颜色
                            }
                        ],
                        false
                    ),
                    shadowColor: "rgba(0, 0, 0, 0.1)"
                },
                // 设置拐点
                symbol: "circle",
                // 拐点大小
                symbolSize: 8,
                // 开始不显示拐点， 鼠标经过显示
                showSymbol: false,
                // 设置拐点颜色以及边框
                itemStyle: {
                    color: "#0184d5",
                    borderColor: "rgba(221, 220, 107, .1)",
                    borderWidth: 12
                },
                // data: [
                //     30, 40, 30, 40, 30, 40, 30, 60, 20, 40,
                    // 30, 40, 30, 40, 30, 40, 30, 60, 20, 40,
                    // 30, 40, 30, 40, 30, 40, 20, 60, 50, 40
                // ]
                data: datas
            },
        ]
    };
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();

//月收入折线图
// 1. 实例化对象
(function () {
    // var monthIncome = [
    //       [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120]
    //     ];
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".month-income"));
    var datas = JSON.parse($('#monthly_income_summary').val());
    // 2.指定配置
    var option = {
        // 通过这个color修改两条线的颜色
        color: ["#00f2f1", "#ed3f35"],
        tooltip: {
            trigger: "axis"
        },

        grid: {
            top: "10%",
            left: "0",
            right: '10%',
            bottom: "8%",
            show: false, // 显示边框
            // borderColor: "#012f4a", // 边框颜色
            containLabel: true // 包含刻度文字在内
        },

        xAxis: {
            type: "category",
            boundaryGap: false,
            data: [
                "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"
            ],
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                color: "#4c9bfd", // 文本颜色
                fontSize: 10
            },
            axisLine: {
                show: true, //轴线
                lineStyle: {
                    color: "rgba(171,171,171,1)"
                }
            }
        },
        yAxis: {
            type: "value",
            axisTick: {
                show: false // 去除刻度线
            },
            axisLabel: {
                color: "#4c9bfd", // 文本颜色
                fontSize: 10
            },
            axisLine: {
                show: true, //轴线
                lineStyle: {
                    color: "rgba(171,171,171,1)"
                }
            }
        },
        series: [
            {
                name: "月收入",
                type: "line",
                smooth: true,
                data: datas
            }
        ]
    };

    // 3. 把配置给实例对象
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
        myChart.resize();
    });

})();

// 年收入类型分布
// 饼形图2 地区分布模块
(function () {
    var myChart = echarts.init(document.querySelector(".year-income"));
    var datas = JSON.parse($('#annual_income_summary').val());
    // console.log(datas);
    var option = {
        grid: {
            containLabel: true
        },
        color: [
            "#006cff",
            "#60cda0",
            "#ed8884",
            "#ff9f7f",
            "#0096ff",
            "#9fe6b8",
            "#32c5e9",
            "#1d9dff"
        ],
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [
            {
                name: "年收入分布",
                type: "pie",
                radius: ["20%", "75%"],
                center: ["40%", "50%"],
                roseType: "radius",
                // 图形的文字标签
                label: {
                    fontSize: 10
                },
                // 链接图形和文字的线条
                labelLine: {
                    // length 链接图形的线条
                    length: 6,
                    // length2 链接文字的线条
                    length2: 8
                },
                data: datas
                //   data: [
                //   {value: 20, name: "损坏丢失"},
                //   {value: 26, name: "发货接收差异"},
                //   {value: 24, name: "退款未退货"},
                //   {value: 25, name: "换货未退款"},
                //   {value: 20, name: "换货且多退款"},
                //   {value: 25, name: "多收运费"},
                //   {value: 30, name: "多收存储费"}
                // ]
            }
        ]
    };
    myChart.setOption(option);
    // 监听浏览器缩放，图表对象调用缩放resize函数
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();
//总收入
(function () {
    // 1实例化对象
    var myChart = echarts.init(document.querySelector(".total-income"));
    var datas = JSON.parse($('#total_income_summary').val());
    // console.log(datas)
    // 2. 指定配置项和数据
    var option = {
        color: ["#2f89cf"],
        tooltip: {
            trigger: "axis",
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        // 修改图表的大小
        grid: {
            left: "10%",
            top: "10%",
            right: "10%",
            bottom: "20%",
            containLabel: true
        },
        xAxis: [
            {
                type: "category",
                // data: ["2020","2021"],
                data: datas[0],
                axisTick: {
                    alignWithLabel: true
                },
                // 修改刻度标签 相关样式
                axisLabel: {
                    color: "rgba(0,176,116,.6)",
                    fontSize: "10"
                },
                // 不显示x坐标轴的样式
                axisLine: {
                    lineStyle: {
                        color: "rgba(0,176,116,1)",
                        width: 2
                    }
                }
            }
        ],
        yAxis: [
            {
                type: "value",
                // 修改刻度标签 相关样式
                axisLabel: {
                    color: "rgba(0,176,116,.6)",
                    fontSize: 10
                },
                // y轴的线条改为了 2像素
                axisLine: {
                    lineStyle: {
                        color: "rgba(0,176,116,.1)",
                        width: 2
                    }
                },
                // y轴分割线的颜色
                splitLine: {
                    lineStyle: {
                        color: "rgba(0,176,116,.1)"
                    }
                }
            }
        ],
        series: [
            {
                name: "年收入",
                type: "bar",
                barWidth: "30%",
                // data: [200, 300],
                data: datas[1],
                itemStyle: {
                    // 修改柱子圆角
                    barBorderRadius: 5
                }
            }
        ]
    };
    // 3. 把配置项给实例对象
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();

// 索赔类型数量分布
(function () {
    var myColor = ["#56D0E3", "#56D0E3", "#56D0E3", "#56D0E3", "#56D0E3", "#56D0E3", "#56D0E3", "#56D0E3", "#56D0E3", "#56D0E3"];
    var datas = JSON.parse($('#categories_cnt').val());
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".category"));
    // 2. 指定配置和数据
    var option = {
        grid: {
            top: "0",
            left: "0",
            right: "10%",
            // bottom: "10%"
            containLabel: true
        },
        // 不显示x轴的相关信息
        xAxis: {
            show: false
        },
        yAxis: [
            {
                type: "category",
                inverse: true,
                // data: ["损坏丢失", "发货接收差异", "退款未退货", "换货未退款", "换货且多退款", "多收运费", "多收存储费"],
                data: datas[0],
                // 不显示y轴的线
                axisLine: {
                    show: false
                },
                // 不显示刻度
                axisTick: {
                    show: false
                },
                // 把刻度标签里面的文字颜色设置
                axisLabel: {
                    color: "rgba(26,143,160,1)"
                }
            },
            {
                // data: [702, 350, 610, 793, 664, 793, 664],
                data: datas[1],
                inverse: true,
                // 不显示y轴的线
                axisLine: {
                    show: false
                },
                // 不显示刻度
                axisTick: {
                    show: false
                },
                // 把刻度标签里面的文字颜色设置为白色
                axisLabel: {
                    color: "rgba(26,143,160,1)"
                }
            }
        ],
        series: [
            {
                name: "条",
                type: "bar",
                // data: [70, 34, 60, 78, 69, 30,80],
                data: datas[2],
                yAxisIndex: 0,
                // 修改第一组柱子的圆角
                itemStyle: {
                    barBorderRadius: 20,
                    // 此时的color 可以修改柱子的颜色
                    color: function (params) {
                        // params 传进来的是柱子对象
                        // console.log(params);
                        // dataIndex 是当前柱子的索引号
                        return myColor[params.dataIndex];
                    }
                },
                // 柱子之间的距离
                barCategoryGap: 50,
                //柱子的宽度
                barWidth: 10,
                // 显示柱子内的文字
                label: {
                    show: true,
                    position: "top",
                    // {c} 会自动的解析为 数据  data里面的数据
                    formatter: "{c}%"
                }
            },
            {
                name: "框",
                type: "bar",
                barCategoryGap: 50,
                barWidth: 15,
                yAxisIndex: 1,
                //  [100, 100, 100, 100, 100],
                data:datas[3],
                itemStyle: {
                    color: "none",
                    borderColor: "#00c1de",
                    borderWidth: 3,
                    barBorderRadius: 15
                }
            }
        ]
    };

    // 3. 把配置给实例对象
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
        myChart.resize();
    });
})();